<!--
list
-->
<template>
    <div class="box">
        <li class="index-read index">
            <div class="articles">
                <router-link :to="{name:'article',params:{artId:item.id}}" class="article"  v-for="item in list" :key="item.id" replace>
                    <div class="img">
                        <img class="div-img" :src= "picHead+item.poster">
                    </div>

                    <div class="article-right">
                        <p class="omit">{{item.title}}</p>
                        <div class="article-bottom">
                            <span class="act_name" v-if="item.classification">{{item.classification}}</span>
                            <span class="dot" v-if="item.classification"></span>
                            <span class="act_time">{{item.createDate | dateFormate}}</span>
                            <span class="art_num iconfont icon-yanjing">{{item.readNum | readNumFormate}}</span>
                        </div>
                    </div>
                </router-link>
            </div>
        </li>
    </div>
</template>

<script>
    export default {
        props: ['list'],
        data(){
            return{
                picHead : this.$store.state.picHead
            }
        },
        update() {
            console.log(this.list)
        },
        method: {
        }
    }
</script>

<style lang="less">
    /* 推荐阅读 */
    .articles {
        padding: 0 .4rem;
        background:#fff;
        .article {
            display: block;
            width: 100%;
            height: 2.133rem;
            padding: .4rem 0;
            border-bottom: 1px solid #eee;
        }
        .article:first-child {
            padding-top: 0;
        }
        .art_num:before{
            padding: 0 4px;
        }
        .art_num{
            float: right!important;
            right: .08rem;
        }
        .dot{
            width: 3px;
            height: 3px;
            border-radius: 2px;
            background: #999;
            margin: 8px 3px 0;
        }
        .act_time{
            margin-left: 1px;
        }
        .article .img {
            overflow:hidden;
            float: left;
            position:relative;
            width: 3rem;
            height: 2.133rem;
            background-repeat:no-repeat;
            background-size: auto 100%;
            background-position: center;
        }
        .article-right {
            float: right;
            width: 5.8rem;
            height: 2.133rem;
        }
        .palia-margin{
            height:1.7rem;
        }
        .div-img{
            height:100%;
            position: absolute;
            left:50%;
            transform: translateX(-50%);
            min-width: 100%;
        }
        .article-right p {
            text-align: left;
            left:0;
            top: .04rem;
            line-height: .6rem;
            width: 100%;
            display: inline-block;
            font-size: .426rem;
            color: #333333;
            font-weight: 600;
            height:1.173rem;
        }
        .article-bottom{
            margin-top: .4rem;
            line-height: .533rem;
        }
        .article-bottom>span {
            float: left;
            line-height: .533rem;
            bottom: .04rem;
            display: inline-block;
            font-size: .32rem;
            color: #666666;
        }
        .article-bottom .art_time{
            float: right;
        }
        .article-bottom{

        }
        .article-right .product-bottom {
            position: absolute;
            bottom: .04rem;
            left: 0;
            display: inline-block;
            margin-top: .4rem;
            font-size: .32rem;
            color: #666666;
            width: 100%;
        }
        .product-bottom .red {
            display: inline-block;
            font-size: .48rem;
            color: #F22F2F;
            float: left;
        }
        .product-bottom .rest {
            display: inline-block;
            font-size: .4rem;
            color: #666666;
            float: right;
        }
        .pali-margin{
            width: 100%;
            height:.6rem;
        }
    }

</style>